<template>
  <div class="flex flex-column w-full h-full">
    <div class="flex p-2">
        <div class="flex gap-2 align-items-center">
        <span class="operation" @click="handleBack"><i class="pi pi-arrow-left" ></i></span>
        <span class="operation" @click="handleGo"><i class="pi pi-arrow-right" ></i></span>
        <span class="operation" @click="handleRefresh"><i class="pi pi-refresh" ></i></span>
      </div>
      <form @submit="onSubmit" class="flex-1 ml-2">
        <InputText placeholder="输入查询内容" class="w-full border-round-top-2xl border-round-bottom-2xl" v-model="keyword"  />
      </form>
    </div>
    <iframe :src="props.url" frameborder="0" width="100%" height="100%" sandbox="allow-top-navigation allow-popups"></iframe>
  </div>

</template>

<script setup lang="ts">
import { InputText } from '@/utils/primevue'
import { ref } from "vue";
import { useField, useForm } from 'vee-validate';
const { handleSubmit } = useForm();

const props = defineProps<{
  url: string,
  origin: string
}>()

const emits = defineEmits(['update:url'])
const { value: keyword } = useField('keyword', '', { initialValue: props.url });

const handleBack = () => {
  window.history.go(-1)
}

const handleGo = () => {
  window.history.go(1)
}

const handleRefresh = () => {
  emits('update:url', props.url)
}

const onSubmit = handleSubmit((values) => {
  const urlReg = /^(((ht|f)tps?):\/\/)?([^!@#$%^&*?.\s-]([^!@#$%^&*?.\s]{0,63}[^!@#$%^&*?.\s])?\.)+[a-z]{2,6}\/?/

  if (values.keyword.trim()) {
    if (urlReg.test(values.keyword)) {
      emits('update:url', values.keyword)
    }else {
      emits('update:url', props.origin + values.keyword)
    }
  }
});
</script>

<style scoped lang="scss">
.operation {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: #aaa;
  cursor: pointer;
  &:hover {
    background-color: #eeeeee46;
  }
}
</style>
